import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../common.dart';

RxInt num = 1.obs;
RxString uuid = ''.obs;

class ReplacementDateil extends StatefulWidget {
  ReplacementDateil({super.key});

  @override
  State<ReplacementDateil> createState() => _SettingPageState();
}

class _SettingPageState extends State<ReplacementDateil> {
  RxMap info = {}.obs;

  getInfo() {
    getData(url: '/exchange/$uuid').then((res) {
      if (res != null) {
        info.value = res;
      }
    });
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      uuid.value = Get.parameters['uuid']!;

      getInfo();
    });
  }

  catrf() {
    //UI
    Get.bottomSheet(
      isScrollControlled: true,
      shape: RoundedRectangleBorder(
        // 圆角设置:ml-citation{ref="7" data="citationList"}
        borderRadius: BorderRadius.vertical(top: Radius.circular(10)),
      ),
      backgroundColor: Colors.white,
      Container(
        height: 300,
        padding: EdgeInsets.symmetric(horizontal: 15),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height: 15),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text('置换', style: TextStyle(fontSize: 20)),
                GestureDetector(
                  onTap: () {
                    Get.back();
                  },
                  child: Image.asset(
                    'static/close.png',
                    width: 18,
                    fit: BoxFit.fitWidth,
                  ),
                ),
              ],
            ),
            Text(
              '拥有以下材料即可进行置换',
              style: TextStyle(fontSize: 14, color: Color(0XFF999999)),
            ),
            if (info['batch_combine'] == 1) SizedBox(height: 20),
            if (info['batch_combine'] == 1)
              Row(
                children: [
                  Text(
                    '置换数量',
                    style: TextStyle(fontSize: 14, color: Color(0XFF999999)),
                  ),
                  Expanded(child: SizedBox()),
                  GestureDetector(
                    onTap: () {
                      if (num.value > 1) {
                        num.value--;
                      }
                    },
                    child: Image.asset(
                      'static/web/jian.png',
                      width: 18,
                      fit: BoxFit.fitWidth,
                    ),
                  ),
                  SizedBox(width: 20),
                  Obx(() => Text('$num', style: TextStyle(fontSize: 16))),
                  SizedBox(width: 20),
                  GestureDetector(
                    onTap: () {
                      num.value++;
                    },
                    child: Image.asset(
                      'static/web/jia.png',
                      width: 18,
                      fit: BoxFit.fitWidth,
                    ),
                  ),
                  //
                ],
              ),
            SizedBox(height: 20),
            Container(
              margin: EdgeInsets.only(bottom: 10),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Color(0XFFF8F9FD),
              ),
              child: Row(
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(10),
                      bottomLeft: Radius.circular(10),
                    ), // 设置圆角大小
                    child: Image.network(
                      '${info['materials']['thumb']}',
                      width: 70,
                      height: 70,
                      fit: BoxFit.fill,
                    ),
                  ),
                  SizedBox(width: 10),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '${info['materials']['title']}',
                        style: TextStyle(
                          fontSize: 14,
                          color: Color(0XFF0F172B),
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 10),
                      Row(
                        children: [
                          SizedBox(
                            width: 76,
                            child: LinearProgressIndicator(
                              borderRadius: BorderRadius.circular(5),
                              value:
                                  info['materials']['count'] >= 1
                                      ? 1
                                      : info['materials']['count'] /
                                          1, // 进度值，范围从0.0到1.0
                              backgroundColor: Colors.grey[300], // 背景颜色
                              valueColor: AlwaysStoppedAnimation<Color>(
                                Color(0XFF0F172B),
                              ), // 进度条颜色
                            ),
                          ),
                          SizedBox(width: 5),
                          Text('${info['materials']['count']}/1'),
                        ],
                      ),
                    ],
                  ),
                  Expanded(child: SizedBox()),
                  info['materials']['count'] == 0
                      ? Text(
                        '未拥有',
                        style: TextStyle(
                          fontSize: 12,
                          color: Color(0XFF999999),
                        ),
                      )
                      : info['materials']['count'] >= 1
                      ? SizedBox()
                      : Text(
                        '去购买',
                        style: TextStyle(
                          fontSize: 12,
                          color: Color(0XFF0F172B),
                        ),
                      ),
                  SizedBox(width: 16),
                ],
              ),
            ),
            Expanded(child: SizedBox()),
            GestureDetector(
              onTap:
                  () => {
                    postData(
                      url: '/exchange/$uuid/confirm',
                      data: {"num": num.value},
                    ).then((res) {
                      if (res != null) {
                        Get.dialog(
                          barrierDismissible: false,
                          AlertDialog(
                            backgroundColor: Colors.transparent,
                            content: Stack(
                              children: [
                                Image.asset(
                                  'static/web/hesuu.png',
                                  width: 250,
                                  fit: BoxFit.fitWidth,
                                ),
                                Positioned(
                                  top: 130,
                                  left: 0,
                                  right: 0,
                                  child: Align(
                                    child: Column(
                                      children: [
                                        Text(
                                          '置换成功',
                                          style: TextStyle(
                                            fontSize: 24,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                        SizedBox(height: 15),
                                        Text(
                                          '本次置换材料已销毁',
                                          style: TextStyle(
                                            fontSize: 14,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                        GestureDetector(
                                          onTap: () {
                                            Get.back();
                                            Get.back();
                                            getInfo();
                                          },
                                          child: Container(
                                            height: 50,
                                            margin: EdgeInsets.symmetric(
                                              vertical: 30,
                                              horizontal: 20,
                                            ),
                                            alignment: Alignment.center,
                                            decoration: BoxDecoration(
                                              color: Color(0XFF0F172B),
                                              borderRadius:
                                                  BorderRadius.circular(50),
                                            ),
                                            child: Text(
                                              '确定',
                                              style: TextStyle(
                                                fontSize: 18,
                                                color: Color(0XFFFFFFFF),
                                              ),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        );
                      }
                    }),
                  },
              child: Container(
                height: 50,
                margin: EdgeInsets.symmetric(vertical: 10),
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: Color(0XFF0F172B),
                  borderRadius: BorderRadius.circular(50),
                ),
                child: Text(
                  '立即置换',
                  style: TextStyle(fontSize: 18, color: Color(0XFFFFFFFF)),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xffffffff),
        leading: buildBackButton(context),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: [
                Obx(
                  () => Image.network(
                    '${info['thumb']}',
                    errorBuilder: (context, error, stackTrace) {
                      return SizedBox(width: 60);
                    },
                  ),
                ),
                SizedBox(height: 15),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 15),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Obx(
                        () => Text(
                          '总置换次数${info['stock']}份',
                          style: TextStyle(
                            fontSize: 14,
                            color: Color(0XFF1F0584),
                          ),
                        ),
                      ),
                      Obx(
                        () => Text(
                          '${info['title']}',
                          style: TextStyle(
                            fontSize: 22,
                            color: Color(0XFF0F172B),
                          ),
                        ),
                      ),
                      SizedBox(height: 20),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                '可置换次数',
                                style: TextStyle(
                                  fontSize: 11,
                                  color: Color(0XFF999999),
                                ),
                              ),
                              Obx(
                                () => Text(
                                  '${info['has_materials']}',
                                  style: TextStyle(
                                    fontSize: 12,
                                    color: Color(0XFF0F172B),
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ),
                            ],
                          ),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                '开始时间时间',
                                style: TextStyle(
                                  fontSize: 12,
                                  color: Color(0XFF999999),
                                ),
                              ),
                              Obx(
                                () => Text(
                                  '${info['start_date']}',
                                  style: TextStyle(
                                    fontSize: 14,
                                    color: Color(0XFF0F172B),
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ),
                            ],
                          ),
                          // Column(
                          //   crossAxisAlignment: CrossAxisAlignment.start,
                          //   children: [
                          //     Text(
                          //       '结束时间',
                          //       style: TextStyle(
                          //           fontSize: 12, color: Color(0XFF999999)),
                          //     ),
                          //     Text(
                          //       '2023.1.1 16:22',
                          //       style: TextStyle(
                          //           fontSize: 14,
                          //           color: Color(0XFF0F172B),
                          //           fontWeight: FontWeight.bold),
                          //     ),
                          //   ],
                          // ),
                        ],
                      ),
                      SizedBox(height: 30),
                      Text(
                        '置换材料',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(top: 10),
                        padding: EdgeInsets.symmetric(
                          horizontal: 15,
                          vertical: 10,
                        ),
                        decoration: BoxDecoration(
                          color: Color(0XFFF8F9FD),
                          borderRadius: BorderRadius.circular(10),
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Obx(
                              () =>
                                  info.isNotEmpty
                                      ? Text(
                                        '藏品《${info['materials']['title']}》*1',
                                      )
                                      : SizedBox(),
                            ),
                            Obx(
                              () =>
                                  info.isNotEmpty
                                      ? Text(
                                        '拥有${info['materials']['count']}',
                                        style: TextStyle(
                                          fontSize: 12,
                                          color: Color(0XFF0F172B),
                                        ),
                                      )
                                      : SizedBox(),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(height: 30),
                      Text(
                        '置换可得',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),

                      Obx(
                        () => Column(
                          children: [
                            if (info.isNotEmpty)
                              for (var item in info['make_skus'])
                                Container(
                                  margin: EdgeInsets.only(top: 10),
                                  padding: EdgeInsets.symmetric(
                                    horizontal: 15,
                                    vertical: 10,
                                  ),
                                  decoration: BoxDecoration(
                                    color: Color(0XFFF8F9FD),
                                    borderRadius: BorderRadius.circular(10),
                                  ),
                                  child: Row(
                                    children: [
                                      ClipRRect(
                                        borderRadius: BorderRadius.circular(
                                          5.0,
                                        ), // 设置圆角大小
                                        child: Image.network(
                                          '${item['thumb']}',
                                          width: 28,
                                          height: 28,
                                          fit: BoxFit.fill,
                                        ),
                                      ),
                                      SizedBox(width: 10),
                                      Text('${item['title']}*${item['num']}'),
                                    ],
                                  ),
                                ),
                          ],
                        ),
                      ),
                      SizedBox(height: 30),
                      Text(
                        '藏品简介',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 10),
                      Obx(
                        () => Column(
                          children: [
                            if (info.isNotEmpty)
                              for (var item in info['detail_images'])
                                Image.network('$item'),
                          ],
                        ),
                      ),
                      SizedBox(height: 10),
                      Text(
                        '购买须知',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 5),
                      Text(
                        '数字藏品交易仅限于18周岁(不含)以上、60周岁(含)以下，并已完成实名认证的中国大陆用户购买。由于不同属性的数字艺术有不同的二次交易规则，请您仔细阅读并同意相关规则后再进行相应操作，以避免不必要的损失。 请注意，一旦数字藏品完成出售，不支持退货在购买之前，请仔细考虑您的购买决策。根据我国相关的法律要求，特定条件下的数字藏品的二次交易不支持任何形式的变相炒作。我们坚决反对数字藏品炒作、场外交易、欺诈，以及其他非法侵权行为。请您甄别上述涉嫌网络欺诈的行为并了解相关风险。',
                        style: TextStyle(
                          fontSize: 12,
                          color: Color(0XFF999999),
                        ),
                      ),
                      SizedBox(height: 15),
                    ],
                  ),
                ),
              ],
            ),
          ),

          // Expanded(child: SizedBox()),
          GestureDetector(
            onTap: () {
              catrf();
            },
            child: Container(
              margin: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
              height: 50,
              decoration: BoxDecoration(
                color: Color(0XFF0F172B),
                borderRadius: BorderRadius.circular(60),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    '立即置换',
                    style: TextStyle(fontSize: 18, color: Color(0XFFFFFFFF)),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
